<template>
  <el-card class="userTool" :body-style="bodyStyle">
    <div>
      <el-button
        v-permission="'AbpIdentity.Roles.Create'"
        type="primary"
        @click="handleAdd"
      >
        新增
      </el-button>
    </div>
    <div>
      <el-input
        v-model="filter"
        placeholder="请输入内容"
        class="searchInput"
        @input="handleInput"
        @keyup.enter.native="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
      </el-input>
      <el-button class="clear" @click="handleClear">重置</el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      bodyStyle: {
        display: 'flex',
        'justify-content': 'space-between',
        'align-items': 'center'
      },
      filter: ''
    }
  },
  methods: {
    handleAdd() {
      const vm = this
      vm.$emit('add')
    },
    handleInput(value) {
      const vm = this
      vm.$emit('input', value)
    },
    handleSearch() {
      const vm = this
      vm.$emit('search')
    },
    handleClear() {
      const vm = this
      vm.filter = ''
      vm.$emit('clear')
    }
  }
}
</script>

<style lang="scss" scoped>
.userTool {
  margin-bottom: 16px;
  .searchInput {
    width: 240px;
  }
  .clear {
    margin-left: 10px;
  }
}
</style>
